<template>
 		<div class="food_container">
		 <header-component >     
      </header-component>
				 <section class="sort_container" slot="sort" style="display:none">
					<div class="sort_item" :class="{choose_type:sortBy == 'food'}">
						<div class="sort_item_container" @click="chooseType('food')">
							<div class="sort_item_border">
								<span :class="{category_title: sortBy == 'food'}" style="font-size:.46rem;">全部品类</span>
								<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
									<polygon points="0,3 10,3 5,8"/>
								</svg>
							</div>
						</div>
						<transition name="showlist">
							<section v-show="sortBy == 'food'" class="category_container sort_detail_type">
								<section class="category_left">
									<ul>
										<li v-for="(item, index) in category" :key="index" class="category_left_li"  @click="selectCategoryName(item.id, index)" >
										<section>
											<span>{{item.name}}</span>
										</section>
										<section>
												<span class="category_count">{{item.count}}</span>
												<svg v-if="index" width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow" >
													<path d="M0 0 L6 4 L0 8"  stroke="#bbb" stroke-width="1" fill="none"/>
												</svg>
										</section>
										</li>
									</ul>
								</section>
							</section>
						</transition>	
					</div>
					 <!-- 暂时隐藏   -->
					<div class="sort_item">
						<div class="sort_item_container" @click="chooseType('sort')">
							<div class="sort_item_border">
								<span :class="{category_title: sortBy == 'sort'}">排序</span>
								<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
									<polygon points="0,3 10,3 5,8"/>
								</svg>
							</div>
						</div>
						<transition name="showlist">
							<section v-show="sortBy == 'sort'" class="sort_detail_type">
								<ul class="sort_list_container" @click="sortList($event)">
									<li class="sort_list_li">
										<p data-sort="1" :class="{sort_select: sortByType == 1}">
											距离最近
										</p>
									</li>
									<li class="sort_list_li" >
										<p data-sort="3" :class="{sort_select: sortByType == 3}">
											评分最高
										</p>
									</li>
								</ul>
							</section>
						</transition>	
					</div>
				</section>  
    	<transition name="showcover">
    		<div class="back_cover" v-show="sortBy"></div>
    	</transition>
    	 <section class="shop_list_container">
       	<scroll ref="scroll"
              :data="list"
              :scrollbar="scrollbarObj"
              :pullUpLoad="pullUpLoadObj"
              :startY="parseInt(startY)"
							:isShow="1"
              @pullingUp="onPullingUp" style="top:45px">
						</scroll>
    	</section>
			<!-- <footer-component></footer-component> -->
    </div>    
</template>
<script>
import HeaderComponent from 'components/header'
// import SList from 'components/shangjia-list'
import FooterComponent from 'components/footer'
import { mapActions,mapGetters } from 'vuex'
import Scroll from 'components/scroll/scroll.vue'
const category = [{
  id: 0,
  name: '全部商家',
  count: 299
}, {
  id: 1,
  name: '分类1',
  count: 15
}, {
  id: 2,
  name: '分类2',
  count: 15
}, {
  id: 3,
  name: '分类3',
  count: 15
}]
export default {
  name: 'merchants',
  components: {
    // SList,
		HeaderComponent,
		FooterComponent,
		Scroll
  },
  data () {
    return {
      category: category,
			sortBy: '',
			sortByType: null,
			list: [],
			page: 1,
			// 滚动配置
			scrollbar: true,
      scrollbarFade: true,
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: '上拉加载更多数据',
      pullUpLoadNoMoreTxt: '没有更多数据了',
      startY: 0
    }
  },
  mounted () {
		this.initData();
  },
  methods: {
    ...mapActions([
      'setHeaderTitle'
    ]),
    initData () {
			this.setHeaderTitle(this.$route.query.title)
			if(this.getLocation.longitude && this.getLocation.latitude){
				this.$http.get(`index/lng/${this.getLocation.longitude}/lat/${this.getLocation.latitude}/type/${this.$route.query.id}/pageCount/${this.page}`)
					.then(({data})=>{
						if(data.status == 200){
							if(data.data.shopList === null){
								this.$vux.toast.show({
									type: 'warn',
									text: '没有更多数据了',
									time: 2000
								})
								this.$refs.scroll.forceUpdate(false)
							}else{
								this.list = this.list.concat(data.data.shopList)
							}
						}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '发生错误',
						time: 2000
					})
				})
			}else{
				this.$http.get(`index/lng/28.344229/lat/113.1872558/type/${this.$route.query.id}/pageCount/${this.page}`)
					.then(({data})=>{
						if(data.status == 200){
							if(data.data.shopList === null){
								this.$vux.toast.show({
									type: 'warn',
									text: '没有更多数据了',
									time: 2000
								})
								this.$refs.scroll.forceUpdate(false)
							}else{
								this.list = this.list.concat(data.data.shopList)
							}
						}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '发生错误',
						time: 2000
					})
				})
			}
    },
    chooseType (type) {
      if (this.sortBy !== type) {
        this.sortBy = type
        if (type === 'food') {
          this.foodTitle = '分类'
        } else {
          this.foodTitle = this.headTitle
        }
      } else {
        this.sortBy = ''
        if (type === 'food') {
          this.foodTitle = this.headTitle
        }
      }
    },
    sortList (e) {
      this.sortByType = e.target.getAttribute('data-sort')
      this.sortBy = ''
    },
    // 选择类别
    selectCategoryName (id, index) {
      // console.log(id, index)
      this.sortBy = ''
    },
		onPullingUp() {
      this.page++
    },
    rebuildScroll() {
      this.$nextTick(() => {
        this.$refs.scroll.destroy()
        this.$refs.scroll.initScroll()
      })
    },
	},
	computed:{
		...mapGetters([
			'getLocation'
		]),
		scrollbarObj: function () {
      return this.scrollbar ? {fade: this.scrollbarFade} : false
    },
    pullUpLoadObj: function () {
      return this.pullUpLoad ? {
        threshold: parseInt(this.pullUpLoadThreshold),
        txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
      } : false
    }
	},
	watch:{
		scrollbarObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    pullUpLoadObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    startY() {
      this.rebuildScroll()
    },
		page(){
			this.initData()
		}
	}
}
</script>
<style scoped>
.food_container{
	padding-top:2rem
}
.sort_container{
	background-color:#fff;
	border-bottom:0.025rem solid #f1f1f1;
	position:relative;
	top:0rem;
	right:0rem;
	width:100%;
	display:flex;
	z-index:13;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.sort_container .sort_item{
	font-size:.55rem;
	color:#444;
	width:50%;
	height:2rem;
	text-align:center;
	line-height:1.5rem;
}
.sort_container .sort_item .sort_item_container{
	width:100%;
	height:100%;
	position:relative;
	z-index:14;
	background-color:#fff;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding-top:.3rem
}
.sort_container .sort_item .sort_item_container .sort_item_border{
	height:1.5rem;
	border-right:0.025rem solid #e4e4e4;
}
.sort_container .sort_item .sort_icon{
	vertical-align:middle;
	-webkit-transition:all .3s;transition:all .3s;
	fill:#666;
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
}
.sort_container .choose_type .sort_item_container .category_title{
	color:#2e9670;
}
.sort_container .choose_type .sort_item_container .sort_icon{
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
	fill:#2e9670
}
.sort_container .showlist-enter-active,.sort_container .showlist-leave-active{
	-webkit-transition:all .3s;
	transition:all .3s;
	-webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
}
.sort_container .showlist-enter,.sort_container .showlist-leave-active{
	opacity:0;
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%)
}
.sort_container .sort_detail_type{
	position: absolute;
	top:2rem;
	left:0rem;
	width:100%;
	display:flex;
	border-top:0.025rem solid #e4e4e4;
	background-color:#fff;
}
.sort_container .category_container .category_left{
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	background-color:#f1f1f1;
	height:auto;
	overflow-y:auto;
}
.sort_container .category_container .category_left span{
	font-size:.46rem;
	color:#666;
	line-height:1rem;
}
.sort_container .category_container .category_left .category_left_li{
	display:flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	padding:0.5rem;
	border-bottom: 1px solid #ccc;
}
.sort_container .category_container .category_left .category_left_li .category_icon{
	width:.8rem;
	height:.8rem;
	vertical-align:middle;
	margin-right:.2rem;
}
.sort_container .category_container .category_left .category_left_li .category_count{
	background-color:#ccc;
	font-size:.4rem;
	color:#fff;
	padding:0 .1rem;
	border:0.025rem solid #ccc;
	border-radius:0.8rem;
	vertical-align:middle;
	margin-right:0.25rem;
}
.sort_container .category_container .category_left .category_left_li .category_arrow{
	vertical-align:middle;
}
.sort_container .category_container .category_left .category_active{
	background-color:#fff;
}
.sort_container .category_container .category_right{
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	background-color:#fff;
	padding-left:0.5rem;
	height:16rem;
	overflow-y:auto;
}
.sort_container .category_container .category_right .category_right_li{
	display:flex;
	height:1.8rem;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	line-height:1.8rem;
	padding-right:0.5rem;
	border-bottom:0.025rem solid #e4e4e4;
}
.sort_container .category_container .category_right .category_right_li span{
	color:#666;
}
.sort_container .category_container .category_right .category_right_choosed span{
	color:#2e9670;
}
.sort_container .sort_list_container{
	width:100%;
}
.sort_container .sort_list_container .sort_list_li{
	display:flex;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}
.sort_container .sort_list_container .sort_list_li svg{
	width:.7rem;
	height:.7rem;
	margin:0 .3rem 0 .8rem;
}
.sort_container .sort_list_container .sort_list_li p{
	flex: auto;
	-webkit-flex: auto;
	-moz-flex: auto;
	text-align:left;
	text-indent:0.25rem;
	border-bottom:0.025rem solid #e4e4e4;
	display:flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}
.sort_container .sort_list_container .sort_list_li p span{
	color:#666;
}
.sort_container .sort_list_container .sort_list_li .sort_select{
	border-left: 2px solid #2e9670;
}

.back_cover{position:fixed;width:100%;height:100%;z-index:10;background-color:rgba(0,0,0,0.3)
}
</style>
